
<template>
    <div class="chart-wrapper" :style="{ height: height + 'px' }">
        <div class="slot">
            <div
                class="chart"
                :id="id"
                :style="{ height: height + 'px' }"
            ></div>
        </div>
        <div class="slot">
            <div class="title">
                {{ chartData }}<small>{{ unit }}</small>
            </div>
            <div class="subtitle">{{ title }}</div>
        </div>
    </div>
</template>

<script>
    import echarts from "echarts";
    import liquid from "echarts";
    import "echarts-liquidfill/src/liquidFill";
    const ratio = JSON.parse(localStorage.ratio);
    export default {
        name: "",
        data() {
            return {
                option: {},
                chartId: null,
                $chartdata: [],
                chartObj: null,
            };
        },
        props: {
            id: {
                type: String,
                required: true,
                default: null,
            },
            title: {
                type: String,
                default: "",
            },
            chartData: {
                type: Number,
                required: true,
                default: 0,
            },
            unit: {
                type: String,
            },
            chartColors: {
                type: Array,
                default: () => new Array("#22A857", "#FFFC79", "#FFFC79"),
            },
            height: {
                type: Number,
            },
        },
        watch: {
            chartData: {
                handler(n) {
                    if (typeof n === "number") {
                        this.updateChart();
                    }
                },
                immediate: true,
            },
            id: {
                handler(n) {
                    this.updateChart();
                },
                immediate: true,
            },
            chartColors: {
                handler(n) {
                    if (n instanceof Array) {
                        this.updateChart();
                    }
                },
                immediate: true,
                deep: true,
            },
            height: {
                handler(n) {
                    this.updateChart();
                },
                immediate: true,
            },
        },
        mounted() {
            // this.renderChart();
        },
        methods: {
            updateChart() {
                this.$nextTick(() => {
                    if (this.chartObj) {
                        this.chartObj.setOption(this.option);
                    } else {
                        this.renderChart();
                    }
                });
            },
            renderChart() {
                this.chartObj = liquid.init(document.getElementById(this.id));
                const VALUE = this.chartData / 100;
                // 绘制图表
                this.option = {
                    // 提示框组件
                    tooltip: {
                        trigger: "item", // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
                        textStyle: {
                            color: "#fff", // 文字颜色
                        },
                    },
                    series: [
                        {
                            type: "liquidFill",
                            name: this.title, // 系列名称，用于tooltip的显示，legend 的图例筛选
                            radius: "100%", // 水球图的半径
                            center: ["50%", "50%"], // 水球图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
                            // 水填充图的形状 circle 默认圆形  rect 圆角矩形  triangle 三角形
                            // diamond 菱形  pin 水滴状 arrow 箭头状  还可以是svg的path
                            shape: "circle",
                            phase: 0, // 波的相位弧度 不设置  默认自动
                            direction: "right", // 波浪移动的速度  两个参数  left 从右往左 right 从左往右
                            data: [
                                VALUE,
                                {
                                    value: VALUE,
                                    direction: "left",
                                },
                            ],
                            outline: {
                                show: false,
                            },
                            // 图形样式
                            itemStyle: {
                                color: {
                                    type: "linear",
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 1,
                                            color: this.chartColors[0],
                                        },
                                        {
                                            offset: 0.05,
                                            color: this.chartColors[1],
                                        },
                                        {
                                            offset: 0,
                                            color: this.chartColors[2],
                                        },
                                    ],
                                    globalCoord: false,
                                },
                            },
                            backgroundStyle: {
                                color: "#D0D1D1", // 水球未到的背景颜色
                                opacity: 0.8,
                            },
                            // 图形的高亮样式
                            emphasis: {
                                itemStyle: {
                                    opacity: 0.8, // 鼠标经过波浪颜色的透明度
                                },
                            },
                            label: {
                                show: false,
                            },
                        },
                    ],
                };
                this.chartObj = this.chartObj.setOption(this.option);
                // 监听屏幕变化自动缩放图表
                window.addEventListener("resize", () => {
                    this.chartObj.resize();
                });
            },
        },
    };
</script>

<style scoped>
    .chart {
        width: 100%;
    }
</style>